<template>
  <div id="app">
    <p>{{ helloMessage }}</p>
    <Hello title="组件基础" :num="0" @onMyEvent="getHelloMessageHandle"/>
    <Hello title="组件深入" />
    <Hello />
    <div>
      <h3>模版语法</h3>
      <p>{{ msg }}</p>
      <div v-html="price"></div>
      <div :class="active">hello</div>
      <p>{{ count * 2 }}</p>
    </div>

    <div>
      <h3>条件渲染</h3>
      <p v-if="flag">孙悟空</p>
      <p v-else>六耳猕猴</p>
      <template v-if="flag">
        <p>1</p>
        <p>2</p>
        <p>3</p>
      </template>
      <div v-show="flag">hello show</div>
    </div>

    <div>
      <h3>列表渲染</h3>
      <button @click="addItemHandle">添加数据</button>
      <ul>
        <li v-for="(item, index) in result" :key="index">{{ item.text }}</li>
      </ul>
    </div>

    <div>
      <h3>事件处理</h3>
      <p v-if="flags">我是新人，请多关照</p>
      <button @click="clickHandle">按钮</button>
      <ul>
        <li
          @click.stop="getMessageHandle(item.text, $event)"
          v-for="(item, index) in result"
          :key="index"
        >
          {{ item.text }}
        </li>
      </ul>
      <a @click.prevent="clickIwenHandle" href="http://iwenwiki.com">iwen</a>
    </div>

    <div>
      <h3>表单的输入与绑定</h3>
      <p>{{ username }}</p>
      <input type="text" v-model.lazy="username" />
      <button @click="clickInputHandle">获取</button>
    </div>

    <div>
      <h3>计算属性vs侦听器</h3>
      <p>{{ message.split("").reverse().join("") }}</p>
      <p>{{ getMessage }}</p>
      <p>{{ getMessages() }}</p>
      <div>
        <input type="text" v-model="nick">
      </div>
    </div>

    <div>
      <h3>Class 与 Style 绑定</h3>
      <p :class="{ 'active':true }">hello class</p>
      <p :class="['a1','a2']">Hello Class2</p>
      <p :class="[{'active':true},'a1','a2']">Hello Class3</p>
    </div>
  </div>
</template>

<script>

import Hello from "./components/Hello"

export default {
  name: "App",
  data() {
    return {
      helloMessage:"",
      nick:"",
      message: "Hello",
      username: "",
      msg: "这是一个模版语法",
      price: "<h3>300</h3>",
      active: "active",
      count: 0,
      flag: false,
      result: [
        {
          id: 1001,
          text: "东京的水",
        },
        {
          id: 1002,
          text: "印度的疫情",
        },
        {
          id: 1003,
          text: "中国的特斯拉",
        },
      ],
      flags: false,
    };
  },
  methods: {
    clickHandle() {
      this.flags = !this.flags;
    },
    getMessageHandle(data, e) {
      console.log(data, e);
    },
    clickIwenHandle() {
      console.log(1111);
    },
    addItemHandle() {
      // this.result.push({
      //   id:1004,
      //   text:"加油加油"
      // })
      this.result = this.result.concat([{ id: 1004, text: "加油加油" }]);
    },
    clickInputHandle() {
      console.log(this.username);
    },
    getMessages() {
      return this.message.split("").reverse().join("");
    },
    getHelloMessageHandle(data){
      console.log(data);
      this.helloMessage = data;
    }
  },
  // 计算属性
  computed: {
    getMessage() {
      return this.message.split("").reverse().join("");
    }
  },
  // 侦听器
  watch:{
    nick(newValue,oldValue){
      console.log(newValue,oldValue);
    }
  },
  components: {
    Hello,  // 注入
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
